<template>
  <div>
    <NavBar></NavBar>
    <div class="header">
      <el-carousel trigger="hover" :height="screenWidth" class="banner">
        <el-carousel-item v-for="item in banners" :key="item.key">
          <el-row>
            <el-col :span="24">
              <img :src="item.img" alt="" ref="imgHeight" class="banner-img" />
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
      <Typer class="typer"></Typer>
      <DynamicArrow class="arrow"></DynamicArrow>
    </div>
    <div class="container">
      <RecommandArticle></RecommandArticle>
      <el-row :gutter="16">
        <el-skeleton animated :count="5" :loading="loading">
          <template #template>
            <el-col :xs="24" :sm="8" :md="6" :span="6">
              <el-skeleton-item variant="image" style="width: 100%; height: 100%" />
              <div style="padding: 14px">
                <el-skeleton-item variant="h3" style="width: 50%" />
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-items: space-between;
                    margin-top: 16px;
                    height: 16px;
                  "
                >
                  <el-skeleton-item variant="text" style="margin-right: 16px" />
                  <el-skeleton-item variant="text" style="width: 30%" />
                </div>
              </div>
            </el-col>
          </template>
          <template #default>
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="8"
              :span="8"
              v-for="item in articles"
              :key="item.key"
            >
              <ArticleItem
                :ArticleMessage="item"
                :router="'/ShowArticle/' + item.id"
                :loading="loading"
              ></ArticleItem>
            </el-col>
          </template>
        </el-skeleton>
      </el-row>
    </div>
    <!-- 返回顶部 -->
    <el-backtop />
    <Footer class="Footer"></Footer>
  </div>
</template>

<script>
import ArticleItem from "@/components/home/ArticleItem.vue";
import Typer from "@/components/common/typer.vue";
import RecommandArticle from "@/components/Article/RecommandArticle.vue";
import DynamicArrow from "@/components/common/DynamicArrow.vue";
import Footer from "@/components/common/Footer.vue";
import NavBar from "@/components/NavBar.vue";
export default {
  data() {
    return {
      screenWidth: "1",
      banners: [
        {
          key: 1,
          img: require("../../../public/img/b1.jpg"),
        },

        {
          key: 2,
          img: require("../../../public/img/b2.jpg"),
        },
        {
          key: 3,
          img: require("../../../public/img/b3.jpg"),
        },
        {
          key: 4,
          img: require("../../../public/img/b4.jpg"),
        },
      ],
      articles: [],
      loading: true,
    };
  },
  components: {
    ArticleItem,
    Typer,
    RecommandArticle,
    DynamicArrow,
    Footer,
    NavBar,
  },
  async created() {
    const res = await this.$http.get("/api/articleList");
    this.articles = res.data.data;

    this.loading = false;

    window.onresize = () => {
      return (() => {
        if (document.documentElement.clientWidth > 960) {
          this.screenWidth = (document.documentElement.clientWidth * 668) / 1620 + "px";
        }
        this.screenWidth = `${this.$refs.imgHeight["0"].height}px`;
      })();
    };
  },
  mounted() {
    if (document.documentElement.clientWidth > 960) {
      this.screenWidth = (document.documentElement.clientWidth * 668) / 1620 + "px";
    }
  },
  methods: {},
};
</script>

<style scoped>
.banner {
  overflow: hidden;
  position: relative;
}
.banner-img {
  width: 100%;
}

.container {
  width: 80%;
  margin: 10px auto;
}

.typer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 2rem;
  margin: 0px auto;
}

.arrow {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translate(-50%, -50%);
}
.header {
  position: relative;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.Footer {
  width: 100%;
  margin: 0px;
}
</style>
